<template>
  <div ref="query-row-bar" class="query-row-bar">
    <div class="query-condition-select" v-if="this.rowNum==='1'">
      <TextOnlyButtonComponent :text="buttonName" :click-function="conditionClickExt"></TextOnlyButtonComponent>
    </div>
    <slot></slot>
  </div>
</template>

<script>
import TextOnlyButtonComponent from "@/components/button/TextOnlyButtonComponent";

export default {
  name: "QueryBarComponent",
  components: {TextOnlyButtonComponent},
  data(){
    return{
      extendFlag:1,
      extButtonDisplay:'display:none',
      buttonName:'高级查询条件展开',
      extentCondition:{}
    }
  },
  props:{
    rowNum:String
  },
  methods:{
    inputRegist:function (name, Object){
      this.$parent.$emit("inputRegist",name,Object);
    },
    conditionClickExt:function (){
      if(this.extendFlag===1){
        this.extendFlag = 0;
        this.buttonName="高级查询条件收起";
        for (let i = 1; i < this.extentCondition.length; i++) {
          let queryElement = this.extentCondition[i].$refs["query-row-bar"];
          if(undefined!==queryElement){
            queryElement.style.display="block";
          }
        }
      }else{
        this.extendFlag = 1;
        this.buttonName="高级查询条件展开";
        for (let i = 1; i < this.extentCondition.length; i++) {
          let queryElement = this.extentCondition[i].$refs["query-row-bar"];
          if(undefined!==queryElement){
            queryElement.style.display="none";
          }
        }
      }
    }
  },
  beforeMount() {
    this.$on("inputRegist",this.inputRegist);
    this.$on("inputUnRegist",this.inputUnRegist);
  }
  ,mounted() {
    if(this.rowNum==='1'){
      this.$refs["query-row-bar"].style.display="block";
      this.extentCondition = this.$parent.$children
    }
  }
}
</script>

<style scoped>
.query-row-bar{
  display: none;
}
.query-condition-select{
  margin-bottom: 5px;
}
</style>